<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <title>Runtime object example</title>
    <script type="text/javascript" src="../x3dom-include.js"></script>
    	<style>
		ul.plain { float:left ; margin-left:1em; margin-bottom:2em; font-size:.9em;}
		ul.plain li { list-style:none;  margin-left:1em; white-space:nowrap; }
		x3d { float:left; }
	</style>
</head>
<body onLoad="init()">
    <h1><code>runtime</code> object example</h1>
    <p>Testing various methods of the <tt>runtime</tt> object.</p>
    <div class="group">
    <x3d id="the_element" showProgress="true" showStat="true" showLog="true" width="512px" height="512px">
    <!--<div id="spinner" class="loader">Loading...</div>-->
    <scene>
           <background crossOrigin='anonymous' backUrl='"media/texture/generic/CubeBack.png"' bottomUrl='"media/texture/generic/CubeDown.png"' frontUrl='"media/texture/generic/CubeFront.png"' leftUrl='"media/texture/generic/CubeLeft.png"' rightUrl='"media/texture/generic/CubeRight.png"' topUrl='"media/texture/generic/CubeUp.png"'></background>
           <background id="bg0" skycolor='0.05 0.12 0.23' description="Background 0"></background>
           <background id="bg1" skycolor='1.00 1.00 1.00' description="Background 1"></background>
           <background crossOrigin='anonymous' id="bg2" backUrl='"media/texture/generic/earth.jpg"' description="Background 2"></background>
           <viewpoint position='2 0 15' description="Camera 0"></viewpoint>
           <viewpoint position='-2 0 5' description="Camera 1"></viewpoint>
           <viewpoint position='0 2 5'  description="Camera 2"></viewpoint>
           <viewpoint position='2 0 5'  description="Camera 3"></viewpoint>
           <transform translation="0 0 1" rotation="0 1 0 0.5">
           <shape>
                <appearance>
                    <material diffuseColor='1 0 0' ></material>
                </appearance>
                <box id='box' ></box>
            </shape>
            <transform translation="5 1 0">
                <shape id="foo">
                    <appearance>
                        <material diffuseColor='0 1 0'></material>
                    </appearance>
                    <sphere></sphere>
                </shape>
            </transform>
           </transform>
    </scene>
    </x3d>

    	<ul class="plain">
            <li><em>Scene access</em></span>
                <ul>
                    <li><span id="scene_info"></span></li>
                    <li><a href="#" onClick="replaceScene(savedSphere);return false;">replace with json sphere</a></li>
                    <li><a href="#" onClick="replaceScene(world2);return false;">replace world</a></li>
                    <li><a href="#" onClick="replaceScene(savedWorld);return false;">restore world</a></li>
                    <li><a href="#" onClick="fetchScene(DeerUrl);return false;">fetch and replace world</a></li>
                    <li><a href="#" onClick="$element.runtime.loadURL(VitaminUrl, VitaminUrl);return false;">load expanded world</a></li>
                </ul>
            </li>
            <li><em>Active bindable</em></span>
	           	<ul>
		    		<li><span id="ab_info"></span></li>
                    <li><a href="#" onClick="document.getElementById('bg0').setAttribute('set_bind','true');updateAbInfo('Background');return false;">Activate background 0 (color)</a></li>
                    <li><a href="#" onClick="document.getElementById('bg1').setAttribute('set_bind','true');updateAbInfo('Background');return false;">Activate background 1 (white)</a></li>
        	    <li><a href="#" onClick="document.getElementById('bg2').setAttribute('set_bind','true');updateAbInfo('Background');return false;">Activate background 2 (earth)</a></li>
        		</ul>
            </li>

		    <li><em>Viewpoint</em>
            	<ul>
		    		<li><a href="#" onClick="$element.runtime.nextView();updateAbInfo('X3DViewpointNode');return false;">Next view</a> [via <tt>runtime.nextView()</tt>]</li>
		    		<li><a href="#" onClick="$element.runtime.prevView();updateAbInfo('Viewpoint');return false;">Prev view</a></li>
			    	<li><a href="#" onClick="$element.runtime.resetView();return false;">Reset current view</a></li>
				    <li><a href="#" onClick="$element.runtime.uprightView();return false;">Upright View</a></li>
				    <li><a href="#" onClick="$element.runtime.showAll('posX');return false;">Show all X</a></li>
				    <li><a href="#" onClick="$element.runtime.showAll('negX');return false;">Show all -X</a></li>
				    <li><a href="#" onClick="$element.runtime.showAll('posY');return false;">Show all Y</a></li>
				    <li><a href="#" onClick="$element.runtime.showAll('negY');return false;">Show all -Y</a></li>
				    <li><a href="#" onClick="$element.runtime.showAll('posZ');return false;">Show all Z</a></li>
				    <li><a href="#" onClick="$element.runtime.showAll('negZ');return false;">Show all -Z</a></li>

                    <li><a href="#" onClick="$element.runtime.showObject(document.getElementById('foo'));return false;">Show sphere</a></li>
		    		<li><a href="#" onClick="$element.runtime.lightView();return false;">Light View</a></li>
				</ul>
            </li>

		    <li><em>Pickmodes</em> (current: <span id="pick_mode_info"></span>)
	            <ul>
				    <li><a href="#" onClick="$element.runtime.changePickMode('idbuf');updatePickInfo();return false;">idbuf</a></li>
				    <li><a href="#" onClick="$element.runtime.changePickMode('color');updatePickInfo();return false;">color</a></li>
				    <li><a href="#" onClick="$element.runtime.changePickMode('textcoord');updatePickInfo();return false;">textcoord</a></li>
				    <li><a href="#" onClick="$element.runtime.changePickMode('box');updatePickInfo();return false;">box</a></li>
				</ul>
            </li>

   		    <li><em>Misc</em>
            	<ul>
            	    <li><a href="#" onClick="alert($element.runtime.isA(document.getElementById('box'),'X3DGeometryNode'));return false;">Check if Box is a X3DGeometryNode</a></li>
	            	<li><a href="#" onClick="$element.runtime.togglePoints();return false;">Toggle points</a></li>
				    <li><a href="#" onClick="alert('Speed value: ' + $element.runtime.speed());return false;">Show speed</a></li>
				    <li><a href="#" onClick="$element.runtime.speed(10.0);return false;">Change speed to 10.0</a></li>
                </ul>
			</li>
   		    <li><em>Modes</em> (current: <span id="nav_mode_info"></span>)
            	<ul>
					<li><a href="#" onClick="$element.runtime.examine();updateNavInfo();return false;">examine</a></li>
                    <li><a href="#" onClick="$element.runtime.walk();updateNavInfo();return false;">walk</a></li>
                    <li><a href="#" onClick="$element.runtime.lookAt();updateNavInfo();return false;">look at</a></li>
                    <li><a href="#" onClick="$element.runtime.fly();updateNavInfo();return false;">fly</a></li>
				</ul>
			<li>
				<em>Debug</em>
            	<ul>
				    <li><a href="#" onClick="toggleDebug(this);">Hide debug</a></li>
				    <li><a href="#" onClick="toggleStats(this);">Hide stats</a> </li>
    		    </ul>
            </li>

            <li>
         	    <em>Node Types Dump</em>
                <ul>
         		    <li><a href="#" onClick="dumpTree();">Dump Types</a></li>
                    <li><a href="#" onClick="dumpComponents();">Dump Components</a></li>
             	</ul>
            </li>
	    </ul>
    </div>
    <div id="types" class="group"></div>

    <script>
	var debug = true;
	var pick_mode_info;
	var nav_mode_info;
	var ab_info;
        var savedSphere;

    x3dom.runtime.ready = function(el) {
        alert('Hello I am the result of a custom runtime ready function.');
	    // simplify access to the X3D element
        $element = document.querySelector('x3d');
        var sphere = { "X3D": { "encoding":"UTF-8", "@profile":"Interchange", "@version":"3.3", "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd", "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json", "head": { "meta": [ { "@name":"title", "@content":"sphere.x3d" }, { "@name":"creator", "@content":"John Carlson" }, { "@name":"generator", "@content":"manual" }, { "@name":"identifier", "@content":"https://coderextreme.net/X3DJSONLD/sphere.x3d" }, { "@name":"description", "@content":"a sphere" }, { "@name":"translated", "@content":"25 May 2018" }, { "@name":"generator", "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html" }, { "@name":"reference", "@content":"X3D JSON encoding: http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding" } ] }, "Scene": { "-children":[ { "Group": { "-children":[ { "Shape": { "-appearance": { "Appearance": { "-material": { "Material": { "@diffuseColor":[1,0,0] } } } }, "-geometry": { "Sphere": { } } } } ] } } ] } } };
	    var spherex3d = $element.runtime.createX3DFromJS(sphere);
	    savedSphere = spherex3d;//.querySelector("X3D");
	    
    };

    x3dom.runtime.noBackendFound = function() {
        alert('Custom no backend present function');
    };

	function init(event) {
	    $element = document.querySelector('x3d');
        var container = document.createElement('container');
        container.innerHTML =
`<X3D><Scene>
  <Transform>
  <DirectionalLight></DirectionalLight>
  </Transform>
  <Shape>
    <Appearance>
      <Material></Material>
    </Appearance>
    <Sphere></Sphere>
  </Shape>
</Scene></X3D>`;
        
        world2 = container.querySelector('X3D');
	    //var savedWorldHTML = document.querySelector('Scene').outerHTML;
        //container.innerHTML = savedWorldHTML;
        savedWorld = document.querySelector('X3D').cloneNode(true);
        DeerUrl = '../../build/jsdoc/jsdoc-template/base/tutorials/models/inline/Deer.x3d';
        VitaminUrl = './media/data/_1_4_Dihydronaphthalene.json';
            
        $element.runtime.ready = function() {
            alert('Per element custom .runtime.ready() function.');
        };

        $element.runtime.enterFrame = function() {
            //x3dom.debug.logInfo('Per element custom .runtime.enterFrame() function');
        };

		updateAbInfo('Viewpoint');
		updatePickInfo();
		updateNavInfo();
	}
        
    function replaceScene(scene) {
        //strip scene of custom properties
        var container = document.createElement('container');
        container.innerHTML = scene.outerHTML;
        $element.runtime.replaceWorld(container.firstElementChild);
    }
       
    function fetchScene(url) {
        $element.runtime.createX3DFromURLPromise(url)
        .then( function (x3d) {
            $element.runtime.replaceWorld(x3d);
        });
    }

	function updatePickInfo() {
		pick_mode_info = document.getElementById('pick_mode_info');
		pick_mode_info.innerHTML = $element.runtime.pickMode() + '/' + $element.runtime.pickMode({'internal':true});
	}


	function updateNavInfo() {
		nav_mode_info = document.getElementById('nav_mode_info');
		nav_mode_info.innerHTML = $element.runtime.navigationType();
	}

	function updateAbInfo(typeName) {
		var bindable = $element.runtime.getActiveBindable(typeName);
		ab_info = document.getElementById('ab_info');
		ab_info.innerHTML = bindable.tagName + " / " + bindable.getAttribute('description');
	}

	function toggleStats(link) {
		stats = $element.runtime.statistics();
		if (stats) {
			$element.runtime.statistics(false);
			link.innerHTML = 'Show statistics';
		} else {
			$element.runtime.statistics(true);
			link.innerHTML = 'Hide statistics';
		}
	}

	function toggleDebug(link) {
		if (debug) {
			$element.runtime.debug(false);
			link.innerHTML = 'Show debug';
		} else {
			$element.runtime.debug(true);
			link.innerHTML = 'Hide debug';
		}
		debug = !debug
	}

    function dumpTree() {
        if (x3dom.docs) {
            document.getElementById('types').innerHTML = x3dom.docs.getNodeTreeInfo();
        } else {
            alert("Documentation module not loaded")
        }
    }

    function dumpComponents() {
        if (x3dom.docs) {
            document.getElementById('types').innerHTML =x3dom.docs.getComponentInfo();
        } else {
            alert("Documentation module not loaded")

        }
    }

</script>
</body>
</html>